import ChartBase from './chart-base'
import { deepClone, mergeObject } from '@/utils'

export default class FlowBase extends ChartBase {
  constructor() {
    super()
  }

  // 基础描述
  _info = {
    name: '数字翻牌器',
    type: 'flop-base',// 图表类型

    group: 'flop',// 图表分类
    component: 'digital-flop',
    icon: 'flop-base'// 图表展示ICON
  }

  // 总 配置项
  _defaultOption = {
    tableField: [
      /*
        {
          key: '',
          fieldName: '',
          fieldDescribe: ''
        }
      */
    ],
    tableData: [],
    config: {
      container: {},
      flop: {
        width: 30,
        height: 40,
        fontSize: 28,
        color: '#ffffff'
      },
      space: {
        position: 8
      }

    },
    style: {
      container: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
      },
      label: {
        fontSize: '18px',
        color: '#606266'
      },
      space: {},
      flop: {

      }
    }
  }

  // 数据结构描述
  _dataPoolConfig = [
    {
      label: '字段',
      key: 'tableField',
      type: ['string', 'date', 'number'],
      limit: 1
    }
  ]

  // 样式配置描述信息
  _styleOptionConfig = [
    {
      label: '布局配置',
      bindKeys: '_group.container',
      controlType: 'group',
      controlValue: '',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '排列方式',
      bindKeys: 'style.container.flexDirection',
      controlType: 'select',
      controlValue: 'row',
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: '纵向',
            value: 'column'
          },
          {
            label: '横向',
            value: 'row'
          }

        ]
      }
    },
    {
      label: '主轴对齐',
      bindKeys: 'style.container.justifyContent',
      controlType: 'select',
      controlValue: 'center',
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: '行首对齐',
            value: 'flex-start'
          },
          {
            label: '行尾对齐',
            value: 'flex-end'
          },
          {
            label: '中点对齐',
            value: 'center'
          },
          {
            label: '两边对齐',
            value: 'space-between'
          },
          {
            label: '均匀分布',
            value: 'space-around'
          }
        ]
      }
    },
    {
      label: '交叉轴对齐',
      bindKeys: 'style.container.alignItems',
      controlType: 'select',
      controlValue: 'center',
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: '行首对齐',
            value: 'flex-start'
          },
          {
            label: '行尾对齐',
            value: 'flex-end'
          },
          {
            label: '中点对齐',
            value: 'center'
          },
          {
            label: '两边对齐',
            value: 'space-between'
          },
          {
            label: '均匀分布',
            value: 'space-around'
          }
        ]
      }
    },
    {
      label: '间距',
      bindKeys: 'config.space.position',
      controlType: 'input-number',
      controlValue: 8,
      controlProps: {},
      controlConfigs: {}
    },

    {
      label: '标题配置',
      bindKeys: '_group.title',
      controlType: 'group',
      controlValue: '',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '文字大小',
      bindKeys: 'style.label.fontSize',
      controlType: 'input',
      controlValue: '24px',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '文字颜色',
      bindKeys: 'style.label.color',
      controlType: 'color-picker',
      controlValue: '#606266',
      controlProps: {},
      controlConfigs: {}
    },

    {
      label: '翻牌器配置',
      bindKeys: '_group.flop',
      controlType: 'group',
      controlValue: '',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '文字大小',
      bindKeys: 'config.flop.fontSize',
      controlType: 'input-number',
      controlValue: 28,
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '文字颜色',
      bindKeys: 'color.flop.color',
      controlType: 'color-picker',
      controlValue: '#ffffff',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '高度',
      bindKeys: 'config.flop.height',
      controlType: 'input-number',
      controlValue: 40,
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '宽度',
      bindKeys: 'config.flop.width',
      controlType: 'input-number',
      controlValue: 30,
      controlProps: {},
      controlConfigs: {}
    }

  ]

  getOption({ dataList = [], dataPoolField, styleOptionConfig = [], themeColor = [] }) {
    let defaultOption = deepClone(this._defaultOption)

    let option = this._transformStyleOptionConfig(styleOptionConfig)

    defaultOption.tableField = dataPoolField['tableField']
    defaultOption.tableData = dataList

    if (defaultOption && option) defaultOption = mergeObject(defaultOption, option)

    return defaultOption
  }
}
